<ion-header>
  <ion-navbar>
    <ion-title>Growth</ion-title>
    <ion-buttons end>
      <button ion-button (click)="showGrowthPaper()">
        获取纸质版
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-row>
    <ion-col>
      <ion-card class="day day-0" (click)="toggleGroup(0)">
        <button ion-item>
          <div class="home-1"></div>
          <div class="card-title">
            <h2>从零开始</h2>
            <p>从这里开始打造你的技能图谱</p>
          </div>
        </button>
      </ion-card>
      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(0), 'animated fadeInLeft': isGroupShown(0)}">
        <button ion-item (click)="openSectionDetailsPage('hello')">
          hello,world
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('env')">
          开发环境
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>

    <ion-col>
      <ion-card class="day day-1" (click)="toggleGroup(1)">
        <button ion-item>
          <div class="home-2"></div>
          <div class="card-title">
            <h2>前期准备</h2>
            <p>准备好一系列工作，如搭建好构建系统</p>
          </div>
        </button>
      </ion-card>
      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(1), 'animated fadeInLeft': isGroupShown(1)}">
        <button ion-item (click)="openSectionDetailsPage('build')">
          构建系统
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('front')">
          前端
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('backend')">
          后台
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>

    <ion-col>
      <ion-card class="day day-2" (click)="toggleGroup(2)">
        <button ion-item>
          <div class="home-3"></div>
          <div class="card-title">
            <h2>编码</h2>
            <p>写代码之前，不就是敲敲键盘就能完成的么？</p>
          </div>
        </button>
      </ion-card>
      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(2), 'animated fadeInLeft': isGroupShown(2)}">
        <button ion-item (click)="openSectionDetailsPage('before')">
          编码之前
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('test')">
          测试
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('coding')">
          编码
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>

    <ion-col>
      <ion-card class="day day-3" (click)="toggleGroup(3)">
        <button ion-item>
          <div class="home-4"></div>
          <div class="card-title">
            <h2>上线</h2>
            <p>怎样才能减少每次上线都遇到的痛苦？</p>
          </div>
        </button>
      </ion-card>
      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(3), 'animated fadeInLeft': isGroupShown(3)}">
        <button ion-item (click)="openSectionDetailsPage('container')">
          容器
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('server')">
          Server
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('configurable')">
          可配置
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>

    <ion-col>
      <ion-card class="day day-4" (click)="toggleGroup(4)">
        <button ion-item>
          <div class="home-5"></div>
          <div class="card-title">
            <h2>数据分析</h2>
            <p>如何开发出用户喜爱的产品?</p>
          </div>
        </button>
      </ion-card>
      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(4), 'animated fadeInLeft': isGroupShown(4)}">
        <button ion-item (click)="openSectionDetailsPage('analytics')">
          数据分析
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('ux')">
          用户体验
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>

    <ion-col>
      <ion-card class="day day-5" (click)="toggleGroup(5)">
        <button ion-item>
          <div class="home-6"></div>
          <div class="card-title">
            <h2>持续交付</h2>
            <p>持续地保持好的习惯，才是挑战</p>
          </div>
        </button>
      </ion-card>
      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(5), 'animated fadeInLeft': isGroupShown(5)}">
        <button ion-item (click)="openSectionDetailsPage('ci')">
          持续集成
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('cd')">
          持续交付
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>

    <ion-col>
      <ion-card class="day day-6" (click)="toggleGroup(6)">
        <button ion-item>
          <div class="home-7"></div>
          <div class="card-title">
            <h2>遗留系统</h2>
            <p>糟糕，我们又玩过火了</p>
          </div>
        </button>
      </ion-card>
      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(6), 'animated fadeInLeft': isGroupShown(6)}">
        <button ion-item (click)="openSectionDetailsPage('legacy')">
          遗留系统
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('refactor')">
          重构
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>

    <ion-col>
      <ion-card class="day day-7" (click)="toggleGroup(7)">
        <button ion-item>
          <div class="home-8"></div>
          <div class="card-title">
            <h2>回顾与新架构</h2>
            <p>啊哈，世界又迎来了新的曙光</p>
          </div>
        </button>
      </ion-card>

      <ion-list class="item-accordion" [ngClass]="{'hidden': !isGroupShown(7), 'animated fadeInLeft': isGroupShown(7)}">
        <button ion-item (click)="openSectionDetailsPage('retro')">
          回顾与总结
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
        <button ion-item (click)="openSectionDetailsPage('arch')">
          架构设计
          <span class="growth-icon" item-left></span>
          <ion-icon name="arrow-forward" item-right></ion-icon>
        </button>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-content>
